<template>
  <view class="myGradient"
        :style="{ '--leftGradient': leftGradient, '--rightGradient': rightGradient,'--bottomGradient':bottomGradient,background: bgColor, '--pd': pd,paddingTop: pt}">
    <up-navbar
        bgColor="#fff"
        :title="title"
        placeholder
        :leftIcon="leftIcon"
        :leftIconColor="leftIconColor"
        :autoBack="false"
        @leftClick="leftClick"
        :titleStyle="titleStyle"
    ></up-navbar>
    <slot></slot>
  </view>
</template>

<script setup lang="ts">
import {onMounted, computed} from 'vue'

const props = defineProps({
  isBack: {
    type: Boolean,
    default: false
  },
  leftIconColor: {
    type: String,
    default: '#303133'
  },
  leftGradient: {
    type: String,
    default: ''
  },
  rightGradient: {
    type: String,
    default: ''
  },
  bottomGradient: {
    type: String,
    default: '#FFFFFF'
  },
  title: {
    type: String,
    default: '首页'
  },
  bgColor: {
    type: String,
    default: ''
  },
  pd: {
    type: String,
    default: ''
  },
  pt: {
    type: String,
    default: ''
  },
  titleStyle: {
    type: String,
    default: ''
  }
})

const pages = getCurrentPages()

const leftIcon = computed(() => {
  return props.isBack ? pages.length < 2 ? 'home' : 'arrow-left' : ''
})

function leftClick() {
  if (!props.isBack) return false
  if (pages.length < 2) {
    uni.reLaunch({url: '/pages/index/index'})
  } else {
    uni.navigateBack({delta: 1})
  }
}

// #ifdef H5
onMounted(() => {
  document.title = props.title
})
// #endif

</script>

<style scoped lang="scss">
@import "@/minx.scss";

.myGradient {
  @include my_gradient(var(--leftGradient), var(--rightGradient), var(--bottomGradient));

  padding: var(--pd);

  ::v-deep.u-navbar__content {
    background: linear-gradient(90deg, var(--leftGradient) 0%, var(--rightGradient) 100%);
  }
}
</style>